<template>
	<view class="lookingGoods">
		<view class="lookingGoods-header">
			<image src="/static/icon/lookingGoodsHeaderBG.png" mode="" class="lookingGoods-header-background"></image>
			<view class="lookingGoods-header-search">
				<view class="lookingGoods-header-search-left">
					<image src="/static/icon/lookingGoodsIcon.png" mode=""></image>
				</view>
				<view class="lookingGoods-header-search-center">
					<image src="/static/icon/searchIcon.png" mode=""></image>
					<input type="text" placeholder="搜索" class="search-bar" />
				</view>
			</view>
			<view class="lookingGoods-header-category">
				<view class="lookingGoods-header-category-item">
					<image src="" mode=""></image>
					<text>现货商品</text>
				</view>
				<view class="lookingGoods-header-category-item">
					<image src="" mode=""></image>
					<text>现货商品</text> 
				</view>
				<view class="lookingGoods-header-category-item">
					<image src="" mode=""></image>
					<text>现货商品</text>
				</view>
			</view>
		</view>
		<view class="lookingGoods-main">
			<view class="lookingGoods-filter">
				<view class="lookingGoods-filter-item">
					<text>全部</text>
				</view>
				<view class="lookingGoods-filter-item">
					<text>近日上新</text>
				</view>
				<view class="lookingGoods-filter-item">
					<text>销量</text>
					<image src="/static/icon/filterIcon.png" mode="" style="width: 16rpx;height: 20rpx;"></image>
				</view>
				<view class="lookingGoods-filter-item">
					<text>价格</text>
					<image src="/static/icon/filterIcon.png" mode=""  style="width: 16rpx;height: 20rpx;"></image>
				</view>
			</view>
			<view class="lookingGoods-Vtabs">
				<uv-vtabs
					:chain="chain"
					:list="list"
					:height="height"
					hdHeight="100rpx"
					@change="change">
					<!-- #ifdef VUE2 -->
					<!-- <template v-for="(item,index) in list"> -->
						<!-- <uv-vtabs-item :index="index" :key="index"> -->
					<!-- #endif -->
					<!-- #ifdef VUE3 -->
					<template v-for="(item,index) in list" :key="index">
						<uv-vtabs-item :index="index">
					<!-- #endif -->
							<view class="lookingGoods-Vtabs-item"
								v-for="(item2,index2) in item.childrens"
								:key="index2">
								<view class="lookingGoods-Vtabs-item-left">
									<image src="" mode=""></image>
								</view>
								<view class="lookingGoods-Vtabs-item-right">
									<view class="lookingGoods-Vtabs-item-right-shop">
										<view class="lookingGoods-Vtabs-item-right-shop-title">
											GYXH-光阴邂逅/商品名称+规格显示
										</view>
										<view class="lookingGoods-Vtabs-item-right-shop-info">
											近七日 售23654
										</view>
									</view>
									<view class="lookingGoods-Vtabs-item-right-foot">
										<view class="lookingGoods-Vtabs-item-right-foot_left">
											<text>￥</text>
											<text>999</text>
											<text>元/件</text>
										</view>
										<view class="lookingGoods-Vtabs-item-right-foot_right">
											<uv-button color="#EC483A" customStyle="font-size: 24rpx;height: 48rpx;border-radius: 16rpx;padding: 0;">去购买</uv-button>
										</view>
									</view>
								</view>
							</view>
							<view 
								class="gap"
								v-if="index<list.length-1">
								<!-- <uv-gap bg-color="#f1f1f1" height="1"></uv-gap> -->
								<uv-divider></uv-divider>
							</view>
						</uv-vtabs-item>
					</template>
					<uv-gap bg-color="#fff" height="600"></uv-gap>
				</uv-vtabs>
			</view>
		</view>
		
	</view>
  
</template>

<script lang="ts" setup>
	import { ref, toRaw, computed, onMounted } from 'vue'
	const getList = ref<any>([])
	getList.value = [{
		name: 'uv-ui简介',
		childrens: [{
			name: 'uv-ui简介',
			desc: '1. uv-ui最初是在uview2.x的基础上进行改进优化，支持vue3等优化，最重要的是支持单独导入直接使用，无需在main.js中进行配置。\n\n2. uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。但是会在下载处进行广告配置，作为开发团队的研发费用的部分来源，所以希望大家理解。'
		}]
	}, {
		name: 'uv-ui特点',
		childrens: [{
			name: '全端兼容',
			desc: 'uv-ui支持App（vue）、App（nvue）、H5、小程序、VUE2、VUE3，支持nvue原生渲染。uv-ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。'
		}]
	}, {
		name: '更新日志',
		badge: {
			show: true,
			value: 5
		},
		childrens: [{
			name: '更新日志',
			desc: 'uv-ui的重大更新在更新日志中都有所说明，如果在开发的过程中遇到文档不完善，可以提供给我们，我们会持续完善，非常感谢大家的支持。更新日志：https://www.uvui.cn/components/changelog.html'
		}]
	}, {
		name: '设计规范',
		childrens: [{
			name: '设计规范',
			desc: '为了约束合成更多优秀的组件和模板，打造优质的体验，我们拟定了一些UI界面设计和建议。同时部分之间会有依赖，这是为了减少代码冗余的同时提高开发效率，模块化是我们的基础。如果大家有好的建议，可以提出进行改进。'
		}]
	}, {
		name: '交流反馈',
		childrens: [{
			name: '交流反馈',
			desc: 'uv-ui为采用MIT许可证的开源项目，使用完全免费。欢迎加QQ群交流反馈，一起学习，共同进步。QQ群： 549833913'
		}]
	}]
	
	const list = ref([])
	const chain = ref(true)
	const appRightTopInfo = ref({})
    const height = computed(() => uni.getSystemInfoSync().windowHeight - uni.upx2px(272) - uni.upx2px(112))
    onMounted(() => {
        // 模拟接口请求数据
        uni.showLoading({
            title: '加载中'
        })
        setTimeout(() => {
            list.value = getList.value
            uni.hideLoading()
        })
        appRightTopInfo.value = uni.getMenuButtonBoundingClientRect()
        console.log(toRaw(appRightTopInfo.value))
    })
    const change = (index) => {
        // list.value[index].open = !list.value[index].open
    }
	
</script>

<style scoped lang="scss">
	.lookingGoods{
		background-color: #F7F7F8;
	}
	.lookingGoods-header{
		width: 100%;
		height: 272rpx;
		padding: 88rpx 12rpx 24rpx 32rpx;
		box-sizing: border-box;
		position: relative;
	}
	.lookingGoods-header-search{
		width: 100%;
		display: flex;
		align-items: center;
		height: 88rpx;
		.lookingGoods-header-search-left{
			image{
				width: 80rpx;
				height: 40rpx;
			}
		}
		.lookingGoods-header-search-center{
			height: 60rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 0 16rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-left: 16rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			input{
				padding: 0;
				height: 100%;
				border: none;
				
				font-family: Noto Sans SC, Noto Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}
	.lookingGoods-header-category{
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		height: 96rpx;
		padding: 8rpx 32rpx 24rp 32rpx;
		box-sizing: border-box;
		.lookingGoods-header-category-item{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 16rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			image{
				width: 32rpx;
				height: 32rpx;
			}
			text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				margin-left: 8rpx;
			}
		}
	}
	.lookingGoods-header-background{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	

	.search-bar {
	  width: 100%;
	  padding: 5px;
	  border-radius: 15px;
	  border: 1px solid #ccc;
	}

	.icon {
	  width: 24px;
	  height: 24px;
	}
	.gap {
		padding: 0 30rpx;
	}
	
	.lookingGoods-Vtabs{
		width: 100%;
		height: calc(100vh - 272rpx - 112rpx);
		overflow-y: scroll;
		.lookingGoods-Vtabs-item{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			height: 220rpx;
			padding: 0 28rpx 0 20rpx;
			box-sizing: border-box;
			.lookingGoods-Vtabs-item-left{
				width: 220rpx;
				height: 220rpx;
				border-radius: 16rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.lookingGoods-Vtabs-item-right{
				width: calc(100% - 220rpx - 20rpx);
				height: 100%;
				margin-left: 20rpx;
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				justify-content: space-between;
				.lookingGoods-Vtabs-item-right-shop{
					display: flex;
					flex-flow: column;
					align-items: flex-start;
					justify-content: flex-start;
					.lookingGoods-Vtabs-item-right-shop-title{
						font-family: PingFang SC-Semibold;
						font-weight: 600;
						font-size: 32rpx;
						color: #000000;
						display: -webkit-box;  /* 兼容旧版浏览器 */
						-webkit-line-clamp: 2;   /* 显示两行 */
						-webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.lookingGoods-Vtabs-item-right-shop-info{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #000000;
						margin-top: 16rpx;
					}
				}
				.lookingGoods-Vtabs-item-right-foot{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.lookingGoods-Vtabs-item-right-foot_left{
						display: flex;
						align-items: baseline;
						justify-content: flex-start;
						text{
							color: #FF2E00;
							font-size: 22rpx;
							font-weight: 600;
							&:nth-child(2){
								font-size: 36rpx;
							}
						}
					}
					.lookingGoods-Vtabs-item-right-foot_right{
						width: 128rpx;
						height: 48rpx;
					}
				}
			}
		}
		
	}
	
	.lookingGoods-main{
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;
		box-shadow: 2rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.02);
		.lookingGoods-filter{
			width: 100%;
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.lookingGoods-filter-item{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}
</style>